<template>
  <el-breadcrumb separator="/" class="breadcrumb">
    <el-breadcrumb-item :to="{name:'FrontIndex'}">首页</el-breadcrumb-item>
    <el-breadcrumb-item>体检套餐列表</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="search-rows">
    <el-row gutter="0" class="row">
      <el-col :span="2"><span class="label">【分类】</span></el-col>
      <el-col :span="2" v-for="one in condition.type">
        <span :class="one.active?'item.active':'item'" @click="selectHandle('type',one.name)">
        {{ one.name }}
      </span>
      </el-col>
    </el-row>
    <el-row gutter="0" class="row">
      <el-col :span="2"><span class="label">【性别】</span></el-col>
      <el-col :span="2" v-for="one in condition.sex">
        <span :class="one.active?'item.active':'item'"
              @click="selectHandle('sex',one.sex)">
        {{ one.name }}
      </span>
      </el-col>
    </el-row>
    <el-row gutter="0" class="row">
      <el-col :span="2"><span class="label">【价格】</span></el-col>
      <el-col :span="2" v-for="one in condition.priceType">
        <span :class="one.active?'item.active':'item'"
              @click="selectHandle('priceType',one.name)">
        {{ one.name }}
      </span>
      </el-col>
    </el-row>
  </div>
  <div class="search-filter">
    <el-radio-group v-model="radio" @change="selectRadio">
      <el-radio label="最新" size="large">最新</el-radio>
      <el-radio label="销量" size="large">销量</el-radio>
    </el-radio-group>
    <div class="sort-operate" @click="selectPrice">
      <span>价格</span>
      <SvgIcon :name="priceOrder.icon" class="sort-icon"/>
    </div>
  </div>
  <div class="goods-container">
    <ul class="goods-list" v-infinite-scroll="load">
      <li class="item" v-for="(one,index) in data.dataList"
          :style="(index+1)%4==0?'margin-right:0':''">
        <div class="card">
          <img :src="one.image"/>
          <h4>{{ one.title }}</h4>
          <el-tooltip class="box-item" effect="dark" placement="top">
            <template #content>
              <div style="width: 260px;">{{ one.description }}</div>
            </template>
            <p class="desc">
              <span>折</span>
              {{ one.description }}
            </p>
          </el-tooltip>
          <p class="price">
            <span class="current">￥{{ one.currentPrice }}</span>
            <span class="old">￥{{ one.initialPrice }}</span>
            <span class="sale">已售{{ one.salesVolume }}</span>
          </p>
          <input type="button" class="buy-btn" @click="viewHandle(one.id)" value="立即购买"/>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, reactive, ref} from "vue";
import SvgIcon from "../../components/SvgIcon.vue";
import router from "../../router";

let keyword = router.currentRoute.value.query.keyword;


const {proxy} = getCurrentInstance();
window.scroll(0, 0);
let radio = ref(null);
const priceOrder = reactive({
  icon: 'sort-default',
  type: 'default'
});
const dataForm = reactive({
  keyword: null,
  type: null,
  sex: null,
  priceType: null,
  orderType: null
})
if (keyword == '' || keyword == null) {
  dataForm.keyword = null;
} else {
  dataForm.keyword = keyword
}

const condition = reactive({
  type: [
    {name: '不限', active: true},
    {name: '父母体检', active: false},
    {name: '入职体检', active: false},
    {name: '职场白领', active: false},
    {name: '个人高端', active: false},
    {name: '中青年体检', active: false}
  ],
  sex: [
    {name: '不限', active: true},
    {name: '男性', active: false},
    {name: '女性', active: false},
  ],
  priceType: [
    {name: '不限', active: true},
    {name: '0~100', value: 1, active: false},
    {name: '100~500', value: 2, active: false},
    {name: '500~1000', value: 3, active: false},
    {name: '1000以上', value: 4, active: false},
  ]
})
const data = reactive({
  dataList: [],
  pageIndex: 1,
  pageSize: 12,
  totalCount: 0,
  isLast: false
})

function selectHandle(key, name) {
  condition[key].forEach(function (one) {
    if (one.name == name) {
      one.active = true;
      if (key != 'priceType') {
        dataForm[key] = (one.name == '不限' ? null : one.name)
      } else {
        dataForm[key] = (one.name == '不限' ? null : one.value)
      }
    } else {
      one.activive = false;
    }
  });
  data.dataList = [];
  data.pageIndex = 1;
  data.totalCount = 0;
  data.isLast = false;
  loadDataList();
}

function loadDataList() {
  if (data.isLast) {
    return;
  }
  let json = {
    keyword: dataForm.keyword,
    type: dataForm.type,
    sex: dataForm.sex,
    priceType: dataForm.priceType,
    orderType: dataForm.orderType,
    page: data.pageIndex,
    length: data.pageSize
  };
  proxy.$http('/front/goods/searchListByPage', 'POST', json, true, function (resp) {
    let page = resp.page;
    let list = page.list;
    if (list == null || list.length == 0) {
      data.isLast = true;
      data.pageIndex--;
    } else {
      for (let one of list) {
        one.image = `${proxy.$minioUrl}/${one.image}`;
      }
      data.dataList = data.dataList.concat(list);
      data.totalCount = page.totalCount;
    }
  })
}

function load() {
  if (data.isLast) {
    return;
  }
  data.pageIndex + 1;
  loadDataList();
}

function viewHandle(id) {
  router.push({
    name: 'FrontGoods',
    params: {
      id: id
    }
  })
}

loadDataList()
</script>

<style scoped lang="less">
@import "goods_list";
</style>
